<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:h="http://java.sun.com/jsf/html"
			xmlns:f="http://java.sun.com/jsf/core">

  <h:body>

    <ui:composition template="./WEB-INF/view/template.xhtml">

      <ui:define name="contents">

        <h:panelGroup id="indexLeftColumn" layout="block">
          <h:panelGroup id="categoryLeftColumn" layout="block">

            <c:forEach var="category" items="${categoryFacade.findAll()}">
              <c:choose>

                <c:when test="${category.id == param.cid}">
                  <h:panelGroup styleClass="categoryButton" 
																id="selectedCategory" layout="block">
                    <h:panelGroup  styleClass="categoryText">
                      ${category.name}
										</h:panelGroup>
                  </h:panelGroup>
                </c:when>

                <c:otherwise>
                  <h:link outcome="category" styleClass="categoryButton" >
										<f:param name="cid" value="#{category.id}" />
                    <h:panelGroup  styleClass="categoryText">
                      ${category.name}
										</h:panelGroup>
                  </h:link>
                </c:otherwise>

              </c:choose>
            </c:forEach>

          </h:panelGroup>
        </h:panelGroup>

        <h:panelGroup id="indexRightColumn" layout="block">
          <h:panelGroup id="categoryRightColumn" layout="block">

            <c:set var="selectedCategory"
                   value="${categoryFacade.find(param.cid)}" scope="session" />

            <p id="categoryTitle">
              <span style="background-color: #f5eabe; padding: 7px;">${selectedCategory.name}</span>
            </p>

            <c:set var="categoryProducts"
                   value="${categoryFacade.getProductCollection(param.cid)}" scope="view" />

            <table id="productTable">

              <c:forEach var="product" items="${categoryProducts}" varStatus="iter">

                <tr class="${((iter.index % 2) == 0) ? 'lightBlue' : 'white'}">

                  <td>
                    <img src="${initParam.productImagePath}${product.name}.png"
                         alt="${product.name}"/>
                  </td>

                  <td>
                    ${product.name}
                    <br/>
                    <span class="smallText">product.description</span>
                  </td>

                  <td>
                    &euro; ${product.price} / unit
                  </td>

                  <td>

                    <form action="#{cartManager.addProduct()}" method="post">
                        <input type="hidden"
                               name="productId"
                               value="#{product.id}"/>
                        <input type="hidden"
                               name="categoryId"
                               value="#{param.cid}"/>
                        <input type="submit"
                               name="submit"
                               value="add to cart"/>
                    </form>

                  </td>
                </tr>
              </c:forEach>
            </table>

          </h:panelGroup>
        </h:panelGroup>
      </ui:define>
    </ui:composition>
  </h:body>
</html>
